<%@page import="com.mycity.jsonops.PostOps"%>
<%@page import="com.mycity.dao.UserTab"%>
<%@page import="com.mycity.dao.PostTab"%>
<%
    UserTab userNow = (UserTab) session.getAttribute("user_info");
    UserTab user = (UserTab) request.getAttribute("owner");
    PostTab[] posts = (PostTab[]) request.getAttribute("userposts");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>My City Profile</title>
        <meta http-equiv="cache-control" content="no-cache" />
        <!-- Main style -->
        <link rel="stylesheet" href="/MyCityWeb/css/style.css" type="text/css" />
        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.js"></script>


        <script type="text/javascript">
            $(function() {
                $("#tagsearch").suggest({
                    key: "AIzaSyDIO2lbCrilTAPn9ZBIU1PL6n46FxnqgEw"
                }).bind("fb-select", function(e, data) {
                    $("#tagsearch").val(data.name + "(" + data.notable.name + ")");
                });
            });
        </script>

    </head>

    <body class="direction-left">

        <!------ HEADER (BEGIN) ---------------------------->
        <div class='header'>
            <!-- HEADER MENU ICONS (BEGIN) -->
            <div class='menu' style='float: right; margin-right:10px; margin-left:1px;'>
                <a href="/MyCityWeb/home.jsp"><img src="/MyCityWeb/img/home.png" title='HOME' /></a>
            </div>
            <!-- HEADER MENU ICONS (END) -->

        </div>	
        <!------- HEADER (END) -------------------------------->

        <div class='result-panel'>
            <div class='result-right'>

                <div class='profile-img'>
                    <% if (user.getPic() == null || user.getPic().isEmpty()) {%>
                    <img id="profilepic" width="128px" height="128px" src='/MyCityWeb/img/male.png' style='' />
                    <%} else {%>
                    <img id="profilepic" width="128px" height="128px" src='http://i.imgur.com/<%=user.getPic()%>.jpg' style='' />
                    <%}%>
                </div>

                <!-- PROFILE -->
                <p class='title'>Profile of <%=user.getFirstname() + " " + user.getLastname()+"  [LEVEL="+user.getLevel()+"]"%> <%=(userNow!=null && userNow.getUserId()==user.getUserId())?"<a href='/MyCityWeb/profilePage.jsp'>(EDIT PROFILE)</a>":""%></p>
                <p class="about">

                    <br />
                    <%=user.getBio()%>
                </p>
                <!-- /PROFILE -->
                <p class='title'>Achievements</p>
                <p class="about">
                    <br />
                    <ul class="dic-result">
                        <% String[] achieves = user.getAchievements();
                            int achLen = achieves.length;
                            int acount=0;
                            for (int i = 0; i < achLen; i++) {
                                if (achieves[i] != null) {%>
                        <li><% out.print(achieves[i]); acount++;%></li> 
                            
                            <%          }
                                }
                                if(acount==0)
                                    out.print("You do not have any achievements!");
                            %>
                    </ul> 
                </p>

                <!-- PROFILE -->

                <!-- /PROFILE -->

            </div>

            <!-------- SIDEBAR (BEGIN) --------------------->

            <div class='result-left'>
                <div class='title'><span class='title'>RECENT POSTS OF <%=user.getFirstname() + " " + user.getLastname()%></span></div>
                <ul class='dic-result'>	
                    <%
                        if (posts.length > 0) {
                            int count = Math.min(posts.length, 5);
                            int idx = 0;
                            for (int i = 0; i < count; i++) {
                                out.print("<li><a href='/MyCityWeb/Post/view/" + posts[i].getPostId() + "'>");
                                out.print(posts[i].getPostContent() + "</br>Date:"
                                        + posts[i].getPostDate() + "</a></li>");
                                if (idx++ == count) {
                                    break;
                                }
                            }
                        } else {
                            out.print("No posts");
                        }
                    %>
                </ul>
            </div>

            <div class='result-left'>
                <div class='title'><span class='title'>SEARCH FOR TAGS</span></div>
                <div>
                    <form action='/MyCityWeb/Search/byTag/' method='post'>
                        <input type='text' name='searchtag'  id="tagsearch" autocomplete="off" placeholder='Enter a tag...' />
                        <input type='submit' class='city-search' value='SEARCH' />
                    </form>
                </div>
            </div>
            <!-------- SIDEBAR (END) --------------------->

        </div>


    </body>
</html>
